﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择需要使用的图形</title>

<style>
img {
	width: 200px;
	heigh: 200px;
}
</style>

</head>
<body>

	<table>
		<tr>
			<td></td>
			<td><a href="bubble/index"><img src="image/bubble.png" />
			</a>
			</td>
			<td>bubble chart source: http://bl.ocks.org/mbostock/4063269</td>
			<td>Bubble charts encode data in the area of circles. Although
				less perceptually-accurate than bar charts, they can pack hundreds
				of values into a small space. Implementation based on work by Jeff
				Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="sunburst/index"><img src="image/sunburst.png" />
			</a>
			</td>
			<td>sunburst diagram source: http://bl.ocks.org/mbostock/4063423</td>
			<td>A sunburst is similar to the treemap, except it uses a
				radial layout. The root node of the tree is at the center, with
				leaves on the circumference. The area (or angle, depending on
				implementation) of each arc corresponds to its value. Sunburst
				design by John Stasko. Data courtesy Jeff Heer.</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="circlepacking/index"><img
					src="image/circlepacking.png" /> </a>
			</td>
			<td>circle packing diagram source:
				http://bl.ocks.org/mbostock/4063530</td>
			<td>Enclosure diagrams use containment to represent the
				hierarchy. Although circle packing is not as space-efficient as a
				treemap, it better reveals the hierarchy. Implementation based on
				work by Jeff Heer. Data shows the Flare class hierarchy, also
				courtesy Jeff Heer</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="circletree/index"><img
					src="image/circletree.png" /> </a>
			</td>
			<td>circle tree diagram source:
				http://bl.ocks.org/mbostock/4063550</td>
			<td>The tree layout implements the Reingold-Tilford algorithm
				for efficient, tidy arrangement of layered nodes. The depth of nodes
				is computed by distance from the root, leading to a ragged
				appearance. Cartesian orientations are also supported.
				Implementation based on work by Jeff Heer and Jason Davies using
				Buchheim et al.'s linear-time variant of the Reingold-Tilford
				algorithm. Data shows the Flare class hierarchy, also courtesy Jeff
				Heer.</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="tree/index"><img src="image/tree.png" /> </a>
			</td>
			<td>tree diagram</td>
			<td>点击非叶节点可收缩.扩展节点</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="dendrogram/index"><img
					src="image/dendrogram.png" /> </a>
			</td>
			<td>source: http://bl.ocks.org/mbostock/4063570</td>
			<td>A dendrogram is a node-link diagram that places leaf nodes
				of the tree at the same depth. In this example, the classes (leaf
				nodes) are aligned on the right edge, with the packages (internal
				nodes) to the left. Data shows the Flare class hierarchy, courtesy
				Jeff Heer.</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="pie/index"><img src="image/pie.png" /> </a>
			</td>
			<td>pie chart</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="donut/index"><img src="image/donut.png" /> </a>
			</td>
			<td>donut chart</td>
		</tr>
		<tr>
			<td></td>
			<td><a href="bar/index"><img src="image/bar.png" /> </a>
			</td>
			<td>bar chart</td>
		</tr>
		<tr>
			<td>1</td>
			<td><a href="parallelcoord/index"><img
					src="image/parallelCoordinate.png" /> </a>
			</td>
			<td>平行坐标系</td>
		</tr>
		<tr>
			<td>2</td>
			<td><a href="chord/index"><img src="image/chord.PNG" /> </a>
			</td>
			<td>chord diagram: 未实现文件上传显示功能</td>
		</tr>
		<tr>
			<td>3</td>
			<td><a href="area/index"><img src="image/area.png" /> </a>
			</td>
			<td>area chart</td>
		</tr>
		<tr>
			<td>4</td>
			<td><a href="line/index"><img src="image/line.png" /> </a>
			</td>
			<td>line chart</td>
		</tr>
		<tr>
			<td>5</td>
			<td><a href="multiline/index"><img src="image/multiline.png" />
			</a>
			</td>
			<td>multi-line chart</td>
		</tr>
	</table>

</body>
</html>


















